<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表单</title>
    <style>
        form {
            width: 400px;
            margin: 100px auto;
            outline: 1px solid gray;
            padding: 20px;
        }

        textarea {
            resize: none;
        }
        legend{
            text-align: center;
        }
    </style>
</head>

<body>
    <form action="http://localhost:3000/" name="regiter"  novalidate method="POST">
        <div>
            <label for="account">账号：</label>
            <!-- lable是inline元素，但是和span不一样，他具有控制input的一些属性。
        把label的for属性的值和对应的input的id值设置成一样，可以实现点击label输入框获得焦点
        -->

            <input type="text" id="account" value="alert"  tabindex=1 name="account">
            <label for="account">（必填）</label>
        </div>
        <!-- 通过更改type属性可以更改input的类型 -->
        <div>
            <label for="password">密码：</label>
            <input type="password" id="password" placeholder="请输入密码" tabindex=7 name="password">
            <label for="password">（必填）</label>
        </div>
        <!-- 单选框设置type=radio，同一组的单选框应该使用同一个name值，这样才能实现单选 -->
        <div>
            <label>性别：</label>
            <label for="secret">保密</label>
            <input type="radio" name="gender" id="secret" checked value="secret">
            <label for="male">男</label>
            <input type="radio" name="gender" id="male" value="male">
            <label for="female">女</label>
            <input type="radio" name="gender" id="female" value="female">
        </div>
        <!-- 单选框设置type=checkbox，同一组的多选框应该使用同一个name值，这样才保证数据的正常提交 -->
        <div>
            <fieldset>
                <legend>爱好</legend>
                <label for="sing">唱</label>
                <input type="checkbox" id="sing" name="fav" checked disabled>
                <label for="dance">跳</label>
                <input type="checkbox" id="dance" name="fav">
                <label for="rap">rap</label>
                <input type="checkbox" id="rap" name="fav">
                <label for="basketball">篮球</label>
                <input type="checkbox" id="basketball" name="fav">
            </fieldset>
        </div>
        <div>
            <label for="">第一题:</label>
            <label for="a1">A</label>
            <input type="checkbox" id="a1" name="t1">
            <label for="b1">B</label>
            <input type="checkbox" id="b1" name="t1">
            <label for="c1">C</label>
            <input type="checkbox" id="c1" name="t1">
            <label for="d1">D</label>
            <input type="checkbox" id="d1" name="t1">
        </div>
        <div>
            <label for="">第二题：</label>
            <label for="a2">A</label>
            <input type="checkbox" id="a2" name="t2">
            <label for="b2">B</label>
            <input type="checkbox" id="b2" name="t2">
            <label for="c2">C</label>
            <input type="checkbox" id="c2" name="t2">
            <label for="d2">D</label>
            <input type="checkbox" id="d2" name="t2">
        </div>
        <div>
            <label for="email">邮箱：</label>
            <input type="email" id="email" tabindex="3">
        </div>
        <div>
            <textarea name="" id="" cols="30" rows="10" placeholder="请输入签名"></textarea>
            <!-- textarea是双标签，默认内容写在便签的内容区域 -->
        </div>
        <div>
            <label for="yzm">验证码：</label>
            <input type="text" id="yzm" maxlength="4" required >
        </div>
        <div>
            <label for="nickname">昵称:</label>
            <input type="text" id="nickname" readonly value="赵铁柱" tabindex="4">
        </div>
        <div>
            <!-- <label for="nickname">昵称:</label>
            <input type="text" id="nickname" disabled value="赵铁柱" tabindex="2"> -->
        </div>
        <!-- readeonly disabled共同点和区别 
        1.设置给text,email,password 等等这种输入框区别不大，都只能阅读而不能修改，readeonly可以获得焦点，而disable不行
        2.设置给单选框或者多选框，如果不希望该选项能够被选中，就设置disable，而不是readeonly
        -->
        <div>
            <label for="photo">上传头像</label>
            <input type="file" id="photo">
        </div>

        <div>
            <!-- 防伪功能主要为了防止表单被伪造，提高信息安全 -->
            <input type="hidden" value="hfdioajofd90232232">
        </div>
        <div>
            <input type="week">
        </div>
        <div>
            <label for="heros">英雄联盟你最喜欢哪个：</label>
            <select name="" id="heros" multiple>
                <optgroup label="法师">
                    <option value="1">皎月女神·戴安娜</option>
                    <option value="2">符文法师·瑞兹</option>
                    <option value="3">机械先驱·维克托</option>
                    <option value="4">暗黑元首·辛德拉</option>
                    <option value="5">远古巫灵·泽拉斯</option>
                </optgroup>
                <optgroup label="战士">
                    <option value="1">德玛西亚</option>
                    <option value="2">赵新</option>
                </optgroup>
            </select>
        </div>
        <div>
            <!-- 重置到初始状态 -->
            <input type="reset" value="全部删了">
            <!-- 表单提交 -->
            <input type="submit" value="提交">
            <!-- 表单提交 -->
            <input type="image" src="./yun.PNG">
            <!-- 普通按钮 -->
            <input type="button" value="按钮">
            <!-- button如果放在form里面，默认表单提交 -->
            <button>表单提交</button>
        </div>
        <div>
            <input type="text" placeholder="请选择/输入您喜欢的城市：" size="25" list="citys">
            <datalist id="citys">
                <option value="北京">北京</option>
                <option value="上海">上海</option>
                <option value="成都">成都</option>
                <option value="香港">香港</option>
                <option value="厦门">厦门</option>
                <option value="昆明">昆明</option>
                <option value="大理">大理</option>
                <option value="大兴安岭">大兴安岭</option>
            </datalist>
        </div>
    </form>

    <button>普通按钮</button>
</body>

</html>